<template>
  <div
    :style="{ backgroundImage: `url(${imageUrl}/img/bg_mine@2x.png)` }"
    class="user"
  >
    <section
      @tap="
        NavigateTo({
          url: '/pages_user/user_info/user_info'
        })
      "
      class="user-avatar"
    >
      <my-img
        :src="userInfo.avatar || 'default_head.png'"
        alt=""
        class="avatar"
        mode="aspectFill"
      />

      <my-img alt="" class="edit" src="ico_edit_h@2x.png"/>

      <p>{{ userInfo.nick_name || userInfo.phone }}</p>
    </section>

    <div class="teacher">
      <div class="teacher-header">
        <MyImg
          src="ft2/ico_class_h copy 10@2x.png"
          class="icon"
        />
        <span>我的学习顾问</span>

        <MyImg :src="teacherInfo.avatar" class="teacher-icon"/>
        <p>{{ teacherInfo.name }}</p>
      </div>
      <div class="teacher-code">
        <div class="teacher-code-img">
          <my-img :src="teacherInfo.wechat_code"/>
        </div>


        <p>微信号：{{ teacherInfo.wechat_name }}</p>

        <div style="">
          <my-button width="202" height="60" font-size="28" @tap.native="COPY({ data: teacherInfo.wechat_name })"
          >复制微信号
          </my-button
          >
        </div>
      </div>
      <div class="teacher-footer"></div>
    </div>

    <ul class="user-set-list">
      <li
        :key="i"
        @tap="
          _NavigateTo({
            url: set.path
          })
        "
        class="user-set-item"
        v-for="(set, i) in setList"
      >
        <my-img :src="set.url" class="icon"/>
        <span>
          {{ set.name }}
        </span>

        <div class="next"></div>
      </li>
    </ul>

    <div @tap="loginOut" class="login-out">退出登录</div>

    <TabBar :cur="3" class="tab-bar-position"/>
    <white-space :height="50"/>
  </div>
</template>

<script>
  import TabBar from "../../component/tab-bar/tab-bar";
  import MyButton from "../../component/my-button/my-button";
  import { NavigateTo } from "../../utils/router";
  import { mapActions, mapState } from "vuex";
  import { Toast } from "../../utils/modal";
  import { COPY } from "../../utils/common";


  export default {
    name: "user",
    components: {
      TabBar,
      MyButton
    },
    data() {
      return {
        imageUrl: this.$imageUrl,
        setList: [
          {
            url: "icon/1.png",
            name: "兑换课程",
            path: "/pages_user/exchange_course/exchange_course"
          },
          { url: "icon/2.png", name: "联系我们", path: "contact" },
          { url: "ft2/ico_class_h copy 10@2x.png", name: "学习顾问", path: "/pages/teacher/teacher" },
          { url: "icon/3.png", name: "退费政策", path: "/pages_user/charge/charge" },
          {
            url: "icon/4.png",
            name: "关于我们",
            path: "/pages_user/about-us/about-us"
          }
        ]
      };
    },
    computed: {
      ...mapState("User", ["userInfo", "plant", "teacherInfo"])
    },
    onLoad() {
      if (this.plant === "app") {
        this.setList.push(
          { url: "icon/5.png", name: "版本说明", path: "/pages_user/version/version" },
          { url: "icon/6.png", name: "清除缓存", path: "clear" }
        );
      }
    },
    onShow() {
      this.reqUserInfo();
      this.reqTeachInfo();
    },
    methods: {
      ...mapActions("User", ["loginOut", "reqUserInfo", "reqTeachInfo"]),
      NavigateTo,
      COPY,

      _NavigateTo({ url }) {
        if (!url) {
          return Toast({
            title: "暂未开通此功能"
          });
        }

        if (url === "contact") {
          return uni.makePhoneCall({ phoneNumber: "010-53360223" });
        }

        if (url === "clear") {
          return Toast({
            icon: "success",
            title: "已成功清除缓存"
          });
        }

        this.NavigateTo({ url });
      }
    }
  };
</script>

<style lang="scss" scoped>
  @import "../../uni";

  .user {
    @include bg;
    width: 100vw;
    min-height: 100vh;
    background: {
      size: 100%;
      repeat: no-repeat;
    }

    &-avatar {
      position: relative;
      height: upx(320);
      text-align: center;

      .avatar {
        position: absolute;
        height: upx(134);
        width: upx(134);
        left: 0;
        right: 0;
        bottom: upx(90);
        border-radius: 50%;
        border: upx(6) solid #80eada;
        margin: auto;
        overflow: hidden;
      }

      .edit {
        position: absolute;
        bottom: upx(90);
        right: upx(0);
        left: upx(130);
        height: upx(58);
        width: upx(58);
        margin: auto;
        border-radius: 50%;
      }

      p {
        position: absolute;
        left: 0;
        right: 0;
        bottom: upx(40);
        text-align: center;
        @include ft(32, #fff, 500);
      }
    }

    &-set {
      &-list {
        width: 80vw;
        padding: upx(20);
        background: #fff;
        border-radius: upx(32);
        margin: 0 auto;
      }

      &-item {
        display: flex;
        align-items: center;
        margin-bottom: upx(20);

        .icon {
          width: upx(100);
          height: upx(100);
        }

        span {
          flex-grow: 1;
          @include ft(32);
        }

        div.next {
          width: upx(12);
          height: upx(12);
          transform: rotate(-135deg);
          border-color: #bbbfc6;
          border-style: solid;
          border-width: 0 0 upx(4) upx(4);
          margin-right: upx(40);
        }
      }
    }

    .login-out {
      width: upx(288);
      height: upx(64);
      border-radius: upx(32);
      line-height: upx(64);
      border: upx(2) solid rgba(255, 204, 24, 1);
      text-align: center;
      margin: upx(44) auto;
      @include ft(28, $theme-yellow, 500);
    }

    .teacher {
      width: 80vw;
      padding: upx(20);
      background: #fff;
      border-radius: upx(32);
      margin: 0 auto 20px;

      &-icon {
        width: upx(50);
        height: upx(50);
        border-radius: 50%;
        overflow: hidden;
      }

      p {
        margin-left: upx(20);
        @include ft(28);
      }

      &-header {
        display: flex;
        align-items: center;
        margin-bottom: upx(20);

        .icon {
          width: upx(100);
          height: upx(100);
        }

        span {
          flex-grow: 1;
          @include ft(32);
        }
      }

      .icon {
        width: upx(100);
        height: upx(100);
      }

      &-code {

        &-img {
          margin: auto;
          text-align: center;
          width: upx(164);
          height: upx(164);
        }


        text-align: center;

        > p {
          padding: upx(20) 0;
          @include ft(30, #394357, 400);
        }
      }
    }
  }
</style>
